import React,{ Component } from 'react'
import {
    Button,
    Row,
    Col,
    message,
} from 'antd';
import { LegionsProModal,LegionsProTable } from 'legions-pro-design';
import { bind,observer } from 'legions/store-react'
import ProjectStore from '../../stores/projectStore';
import { observable,action,computed } from 'mobx';
import { observableViewModel } from 'legions/store-utils'
import FormPropertyConfig from '../../components/property.config.form/formPropertyConfig';
import AddCodeExpression from './addCodeExpression';
import { getExecutableScript } from '../../utils/codemodCore';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
interface IProps {
    store?: ProjectStore;
    /* onOk: () => void;
    onCancel?: () => void; */
    onDelete?: (record) => void;
    onEdit?: (record) => void;
    onOk: () => void;
}

@bind({ store: ProjectStore })
@observer
export default class AddEvent extends Component<IProps> { 
    @lazyInject(FormPropertyConfig)
    public formPropertyConfig!: FormPropertyConfig
    /** 分组信息表单实例 */
    constructor(props: IProps) {
        super(props)
    }
    onDelete(record) {
        this.props.onDelete && this.props.onDelete(record)
    }
    onEdit(record) {
        this.props.onEdit && this.props.onEdit(record)
    }

    render() {
        const projectCommonApp = this.props.store.context.projectCommonApp;
        return (
            <React.Fragment>
                <AddCodeExpression
                    onReady={(value) => {
                        projectCommonApp.formAddEventCodeExpressionModalRef = value;
                    }}
                    onOk={this.props.onOk}></AddCodeExpression>
                <LegionsProModal
                    maskClosable={false}

                    footer={null}
                    onReady={(value) => {
                        const width = 650;
                        projectCommonApp.formAddEventListTableModalRef = value;
                        value.viewModel.width = width;
                    }}>
                    <React.Fragment>
                        <LegionsProTable
                            scroll={{ x: projectCommonApp.formAddEventListTableRef && projectCommonApp.formAddEventListTableRef.viewModel.tableXAutoWidth,y: 300 }}
                            columns={[
                                {
                                    key: 'event',
                                    title: '已有事件',
                                    dataIndex: 'event',
                                    width: '160px',
                                    render: (_,record,index: number) => {
                                        return <span style={{ cursor: 'pointer' }} onClick={this.onEdit.bind(this,record)}>{record['event']}</span>
                                    }
                                },
                                {
                                    title: '操作',
                                    dataIndex: 'operate',
                                    key: 'operate',
                                    width: '120px',
                                    render: (text,record) => {
                                        return (<Button type="danger" style={{ marginRight: '10px' }} ghost onClick={this.onDelete.bind(this,record)}>删除</Button>)
                                    },
                                },
                            ]}
                            bordered
                            uniqueKey="event"
                            onReady={(value) => {
                                projectCommonApp.formAddEventListTableRef = value;
                            }}
                            size="small"
                            isOpenRowChange
                            dataSource={projectCommonApp.computedEventList}
                            pagination={false}
                        ></LegionsProTable>
                    </React.Fragment>
                </LegionsProModal>
            </React.Fragment>
        )
    }
}